<template>
  <div id="admin-list">
    <u-table title="管理员列表">
      <template v-slot:header-tools>
        <el-button-group>
          <el-tooltip content="创建" placement="bottom">
            <el-button
              @click="handleCreate"
              type="primary"
              icon="el-icon-plus"
              size="mini"
            ></el-button>
          </el-tooltip>
        </el-button-group>
      </template>
      <template v-slot:table-condition-items>
        <tools-condition-item label="状态：">
          <el-select v-model="condition.status" size="small">
            <el-option value="-1" label="全部"></el-option>
            <el-option :value="1" label="启用"></el-option>
            <el-option :value="0" label="禁用"></el-option>
          </el-select>
        </tools-condition-item>
        <tools-condition-item>
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="condition.search"
            clearable
            size="small"
          >
          </el-input>
        </tools-condition-item>
        <tools-condition-item>
          <el-button
            type="success"
            size="small"
            @click="handleSearch"
            :loading="dataLoading"
            >搜索</el-button
          >
        </tools-condition-item>
      </template>
      <template v-slot:table>
        <el-table
          :data="tableData"
          v-loading="dataLoading"
          element-loading-text="拼命加载中"
        >
          <el-table-column prop="id" label="Id"> </el-table-column>
          <el-table-column prop="username" label="账号"> </el-table-column>
          <el-table-column prop="nickname" label="昵称"> </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="handleSetStatus(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间">
          </el-table-column>
          <el-table-column prop="updated_at" label="修改时间">
          </el-table-column>
          <el-table-column prop="id" label="操作">
            <template v-slot="scope">
              <el-button-group>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="handleEdit(scope.row)"
                ></el-button>
                <el-button
                  icon="el-icon-view"
                  size="mini"
                  @click="handleDetail(scope.row.id)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="handleDelete(scope.row.id)"
                ></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="size"
          background
          @current-change="handlePageChange"
        >
        </el-pagination>
      </template>
    </u-table>
    <u-dialog
      :component="AdminForm"
      :title="dialogTitle"
      :dialogVisible.sync="dialogVisible"
      :componentModel.sync="componentModel"
      @success="handleSaveCreateSuccess"
    ></u-dialog>
    <u-dialog
      :component="AdminDetail"
      title="管理员详情"
      :dialogVisible.sync="detailVisible"
      :componentModel.sync="componentDetailModel"
    ></u-dialog>
  </div>
</template>

<script>
import { fetchList, setStatus } from "@/api/admin";
import UTable from "@/components/table/Table";
import ToolsConditionItem from "@/components/table/tools/ToolsConditionItem";
import AdminForm from "./components/Form";
import AdminDetail from "./components/Detail";
export default {
  components: {
    UTable,
    ToolsConditionItem
  },
  data() {
    return {
      tableData: [],
      dataLoading: false,
      page: 1,
      total: 0,
      size: 10,
      condition: {
        status: "-1",
        search: ""
      },
      AdminForm: AdminForm,
      AdminDetail: AdminDetail,
      dialogTitle: "创建管理员",
      componentModel: {
        is_edit: false
      },
      componentDetailModel: {
        id: 0
      },
      dialogVisible: false,
      detailVisible: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSetStatus(row) {
      setStatus(row.id).then(res => {
        this.$message({
          message: "状态修改成功",
          type: "success"
        });
      });
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //删除
        console.log(id);
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.getList();
      });
    },
    handleCreate() {
      this.dialogTitle = "创建管理员";
      this.componentModel = {
        is_edit: false
      };
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.dialogTitle = "编辑管理员";
      this.componentModel.is_edit = true;
      this.componentModel.id = row.id;
      this.dialogVisible = true;
    },
    handleDetail(id) {
      this.componentDetailModel.id = id;
      this.detailVisible = true;
    },
    handleSearch() {
      this.getList();
    },
    handlePageChange(page) {
      this.page = page;
      this.getList();
    },
    getList() {
      let params = {
        page: this.page,
        size: this.size,
        ...this.condition
      };
      this.dataLoading = true;
      fetchList(params).then(res => {
        this.dataLoading = false;
        if (res.data.code === "200") {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },
    handleSaveCreateSuccess() {
      this.dialogVisible = false;
      this.getList();
    }
  }
};
</script>
